<template>
  <div class="app-container">
    <!-- 根据el框架 改版 -->
    <dySteps
      :data-list="dataList"
      :active="active"
      :history-largest="historyLargest"
      @activeFn="activeFn"
    />

    <div class="box">
      <step1
        v-show="active == 0"
        ref="step1"
        :active="active"
        :form-datas="formDatas"
        @backPage="backPage"
        @changeActive="changeActive"
      />
      <step2
        v-show="active == 1"
        ref="step2"
        :active="active"
        :form-datas="formDatas"
        @changeActive="changeActive"
      />
      <step3
        v-show="active == 2"
        ref="step3"
        :active="active"
        :form-datas="formDatas"
        @changeActive="changeActive"
      />
      <step6
        v-show="active == 5"
        ref="step6"
        :active="active"
        :system="system"
        :sub-form-datas="subFormDatas"
        @changeActive="changeActive"
      />
    </div>
  </div>
</template>

<script>
import dySteps from '@/views/components/flowChart/dySteps'
// 引入 步骤页组件
import step1 from '@/views/console/securityGroup/groupStep/step1'
import step2 from '@/views/console/securityGroup/groupStep/step2'
import step3 from '@/views/console/securityGroup/groupStep/step3'
import step6 from '@/views/console/securityGroup/groupStep/step6'

export default {
  components: {
    step1,
    step2,
    step3,
    step6,
    dySteps
  },
  data() {
    return {
      active: 0,

      dataList: [
        {
          title: '节点配置 1',
          icon: 'el-icon-edit'
        },
        {
          title: '业务配置 2',
          icon: 'el-icon-upload'
        },
        {
          title: '保障设置 3',
          icon: 'el-icon-help'
        },
        // {
        //   title: '数据同步 4',
        //   icon: 'el-icon-refresh'
        // },
        // {
        //   title: '预警监控 5',
        //   icon: 'el-icon-bell'
        // },
        {
          title: '确认设置 4',
          icon: 'el-icon-circle-check'
        }
      ],
      // 提交需要的数据
      subFormDatas: {
        securityCatalogues: [],

        securityServices: [],
        securityConfs: {
          isOpen: false
        },
        securitySystemTrend: {
          isOpen: false
        }
      },
      formDatas: {
        securityCatalogues: [],
        securityServices: [],
        securityConfs: {
          isOpen: false,
          usedDisk: 80,
          usedMem: 80,
          usedCpu: 80,
          intervals: '1'
          /** 间隔频率，单位：分钟*/
        },
        securitySystemTrend: {
          isOpen: false,
          /** 是否开启预警监控*/
          distUsed: 80,
          /** 磁盘已使用阈值  百分比 */
          processNum: 50,
          /** 进程数阈值 百分比*/
          networkNum: 80,
          /** 网络连接数阈值 百分比*/
          intervals: '1'
          /** 间隔频率，单位：分钟*/
        }
      },
      fkSysType: 'Windows',
      // 保存操作系统数据
      system: {},
      // 保留历史最大
      historyLargest: 0
    }
  },
  // 初始化，如果有页面传参 则回显绑定数据
  created() {
    this.historyLargest = 0
    let data = this.$route.params
    if (this.$route.params.type) {
      localStorage.setItem(
        this.$route.name,
        JSON.stringify(this.$route.params)
      )
    } else {
      data = JSON.parse(localStorage.getItem(this.$route.name))
    }

    this.pageTyle = data.type
    if (this.pageTyle == 'edit') {
      this.formDatas = data.data

      if (!this.formDatas.securityConfs) {
        this.formDatas.securityConfs = {
          isOpen: 0,
          usedDisk: 80,
          usedMem: 80,
          usedCpu: 80
        }
      }

      // console.log('peizhi', this.formDatas)
    }
  },
  mounted() {
    // 数据绑定完成后 统一走一次下一步，绑定数据
    this.$nextTick(() => {
      setTimeout(() => {
        if (this.pageTyle == 'edit') {
          this.$refs.step1.next()
          this.$refs.step2.next()
          this.$refs.step3.next()
          // this.$refs.step4.dataMonitorEnabled =
          //   this.formDatas.dataMonitorEnabled
          // this.$refs.step4.fullTransferEnabled =
          //   this.formDatas.fullTransferEnabled

          // this.$refs.step4.pageTyle = 'edit'
          // this.$refs.step4.pageIndex = 1
          // this.$refs.step4.next()
          // this.$refs.step5.next()
          setTimeout(() => {
            this.active = 0
          }, 200)
        }
      }, 400)
    })
  },
  methods: {
    // 返回
    backPage() {
      this.$router.replace({
        path: '/group/group'
      })
    },
    // 获取node节点的 文件目录信息
    // getDiskPathFn(node) {
    //   this.$refs.step2.getDiskPathFn(node)
    //   setTimeout(() => {
    //     this.$refs.step4.getDiskPathFn(node)
    //   }, 1000)
    // },
    async activeFn(active) {
      // console.log('active',active,this.historyLargest,this.active);
      if (active <= this.historyLargest) {
        var isTraverse = false
        switch (this.active) {
          case 0:
            isTraverse = await this.$refs.step1.next()
            break
          case 1:
            isTraverse = await this.$refs.step2.next()
            break
          case 2:
            isTraverse = await this.$refs.step3.next()
            break
          case 3:
            // await 会被页面中的pormiss 中的结束提前返回
            new Promise((resolve) => {
              this.$refs.step4.next(resolve, active)
            }).then((res) => {
              // console.log('2333',res);
              if (res) {
                this.active = active
              }
            })
            break
          case 4:
            isTraverse = await this.$refs.step5.next()
            break
          case 5:
            isTraverse = true
            break
          default:
            break
        }

        // 判断是否 检查通过
        // 					console.log('this.active',this.active);
        // 					console.log('isTraverse',isTraverse);
        if (isTraverse) {
          this.active = active
        }
      }
    },
    // 子组件修改父组件 步骤
    changeActive(stepNum, stepData, securitySystemTrend, activeIndex) {
      // console.log(stepNum)
      if (activeIndex || activeIndex === 0) {
        this.active = activeIndex
      } else {
        this.active = stepNum
      }

      if (this.historyLargest <= stepNum) {
        this.historyLargest = stepNum
      }

      // 上一步的时候不用赋值
      if (!stepData) return

      // 获取子组件 返回的数据
      if (stepNum == 1) {
        // 这么参数在第一页下一步 的时候代表是否选择的是品高平台的节点
        if (securitySystemTrend == true) {
          this.$refs.step3.isBingo = true
        } else {
          this.$refs.step3.isBingo = false
        }
        this.subFormDatas.securityName = stepData.securityName
        this.subFormDatas.securityDesc = stepData.securityDesc
        this.subFormDatas.importantNodeId = stepData.importantNodeId
        this.subFormDatas.securityNodeId = stepData.securityNodeId
        this.subFormDatas.importantNodeIp = stepData.importantNodeIp
        this.subFormDatas.securityNodeIp = stepData.securityNodeIp
        this.subFormDatas.systemStatus = stepData.systemStatus

        this.$refs.step2.listHessBizTemFn(this.subFormDatas.importantNodeId)

        // 赋值复刻系统环境变量，在第四步判断使用，在最后提交的时候要删除多余数据
        this.fkSysType = stepData.fkSysType

        this.system = stepData.system

        if (stepData.id) {
          this.subFormDatas.id = stepData.id
        } else {
          this.formDatas.importantNodeIp = this.subFormDatas.importantNodeIp
          this.formDatas.hessNodes = stepData.hessNodes
        }
      } else if (stepNum == 2) {
        this.subFormDatas.securityServices = stepData
        this.$refs.step3.getDisplayName(
          this.subFormDatas.importantNodeId,
          'importantNodeId'
        )
        this.$refs.step3.getDisplayName(
          this.subFormDatas.securityNodeId,
          'securityNodeId'
        )
      } else if (stepNum == 3) {
        // this.subFormDatas.securityService = stepData
      } else if (stepNum == 4) {
        this.subFormDatas.hessGroupPaths = stepData.hessGroupPaths
        var dataMonitorEnabled = JSON.stringify(stepData.dataMonitorEnabled)
        if (dataMonitorEnabled == 'true') {
          dataMonitorEnabled = true
        } else {
          dataMonitorEnabled = false
        }

        var fullTransferEnabled = JSON.stringify(stepData.fullTransferEnabled)
        if (fullTransferEnabled == 'true') {
          fullTransferEnabled = true
        } else {
          fullTransferEnabled = false
        }
        this.subFormDatas.dataMonitorEnabled = dataMonitorEnabled
        this.subFormDatas.fullTransferEnabled = fullTransferEnabled

        this.$refs.step6.initData()
      } else if (stepNum == 5) {
        // 预警json
        this.subFormDatas.securityConfs = stepData
        // 监测json
        this.subFormDatas.securitySystemTrend = securitySystemTrend
      }
      // console.log('待上传数据：', this.subFormDatas);
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.topBpx {
  text-align: right;
  margin-bottom: 20px;
}
</style>
<style></style>
